<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<html>
<head>
    <title>Title</title>
    <script src="${js}/views/vue.min.js"></script>
    <script type="text/javascript" src="${js}/echarts.js"></script>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <link rel="stylesheet" href="${assets}/css/views/department/addDepartment.scss">
    <script src="${js}/jquery-1.9.1.min.js"></script>
    <script src="${js}/jquery.dataTables.js"></script>
    <link href="${css}/bootstrap-datetimepicker.css" type="text/css">
    <script src="${js}/bootstrap-datetimepicker.min.js"></script>
    <script src="${frames}/Chronic/laydate/laydate.js"></script>
    <script src="${assets}/js/views/bpAbnormal.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            height:100%;
        }
        body{
            width:98%;
        }
        h1{
            font-family: MicrosoftYaHei;
            font-size: 20px;
            font-weight: normal;
            color: #2a3137;
            margin-bottom: 26px;
            float: left;
            margin-top:0 !important
        }
        label{
            font-family: MicrosoftYaHei;
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 30px;
            letter-spacing: 0px;
            color: #333333;
            width:75px;
            display:inline-block;
            margin-bottom:20px;
        }
        input,select{
            width: 260px;
            line-height: 19px;
            border: solid 1px #d0d0d0;
            display:inline-block;
            /*margin-left:16px;*/
            font-family: MicrosoftYaHei;
            font-size: 15px;
            font-weight: normal;
            font-stretch: normal;
            color: #999999 !important;
            line-height:32px;
            border-radius:5px;
            margin-bottom:20px;
        }
        #testproject{
            height:34px;
            text-indent:10px;
        }
        #project{
            height:34px;
            text-indent:10px;
        }
        #keep{
            background:#35acfd !important;
        }
        /*.bootstrapDatepickr-cal{*/
        /*left:265px !important;*/
        /*}*/
        #beginDate{
            width:100%;
            line-height: 32px;
            border-radius: 5px;
            border: solid 1px #d0d0d0;
            font-size:15px;
            color:#999999 !important
        }
        .header{
            width:100%;
            overflow:hidden
        }
        #main input{
            text-indent:0.8em
        }
        .btn{
            width:100px;
            line-height: 15px;
            background: #35acfd;
            color: white;
            margin-top:15px;
        }
        .modal-footer{
            margin-top:60px;
        }
        .defualt{
            border:1px solid red !important;
        }
    </style>
</head>
<body>
<div class="header">
    <h1>添加检验项目</h1>
</div>
<div id="main">
    <form>
        <label for="project"  style="margin-left:20px;">大类项目</label>
        <select id="testproject">
            <option value="">请输入内容</option>
            <option v-for="item in testProject" :title="item.id">{{item.name}}</option>
        </select>
        <label for="project">小类项目</label>
        <select id="project">
            <option value="">请输入内容</option>
            <option v-for="item in project" :title="item.id">{{item.name}}</option>
        </select>
        <label for="checkResult" style="margin-left:20px;">结果</label>
        <input type="text" placeholder="请输入结果" name="checkResult" id="checkResult">
        <label for="referenceValue">参考值</label>
        <input type="text" placeholder="请输入参考值" name="referenceValue" id="referenceValue">
        <label for="referenceValue" style="margin-left:20px;">单位</label>
        <input type="text" placeholder="请输入单位" name="unit" id="unit" value="mmHg">
        <label>检验时间</label>
        <div style="width:260px;display:inline-block;vertical-align: middle">
            <div id="PrevTime" class="input-group date form_date" style="width: 100%"  data-date-format="yyyy-mm-dd">
                <input readonly="readonly" id="beginDate" type="text" class="form-control lay-date" placeholder="选择时间" style="text-indent:0em;">
            </div>
        </div>
    </form>
    <div class="change">
        <div class="form-group submitBtn" style="text-align: center ">
            <button type="button" class="btn" data-dismiss="modal" id="closeModalButt" @click="closeFrame()">
                关闭
            </button>
            <button type="submit" class="btn" id="keep"  @click="keep()" style="margin-left:20px;">保存</button>
        </div>
    </div>
</div>

<script>
  var vm = new Vue({
    el:"#main",
    data:{
      idcard:'',
      diseasesType:'',
      // 大类项目
      testProject:[],
      // 小类项目
      project:[],
      type:'',
      urlLib:'',
      refreshto:''
    },
    mounted(){
      //初始化获取数据
      // 获取用药名称
      let that = this;
      var url = location.search;
      // 获取idcard
      that.idcard = url.split('?')[1].split('&')[0].split('=')[1]
      that.diseasesType = url.split('?')[1].split('&')[1].split('=')[1]
      that.type = url.split('?')[1].split('&')[2].split('=')[1]
      // 获取大类项目名称
      $.ajax({
        url:"${URL_TESTPROJECT_SEARCHMEDICALPROJECT}",
        type:"post",
        dataType:"json",
        data:{
          parentId :"0"
        },
        success:function(data){
          that.testProject = data.dataList
        }
      })
      $.ajax({
        url:"${URL_TESTPROJECT_SEARCHMEDICALPROJECT}",
        type:'post',
        dataType: "json",
        data:{
          parentId: $('#testproject option:selected').attr('title')
        },
        success:function(data){
          that.project = data.dataList
        }
      })
      $('#testproject').change(function(){
        $.ajax({
          url:"${URL_TESTPROJECT_SEARCHMEDICALPROJECT}",
          type:'post',
          dataType: "json",
          data:{
            parentId: $('#testproject option:selected').attr('title')
          },
          success:function(data){
            that.project = data.dataList
          }
        })
      })
      <%--$.ajax({--%>
      <%--  url:"${URL_SCREENING_GETBREADLINE}",--%>
      <%--  dataType:'json',--%>
      <%--  type:'post',--%>
      <%--  success:function(data){--%>
      <%--    that.urlLib = JSON.parse(data.data);--%>

      <%--    debugger;--%>
      <%--    that.refreshto = that.urlLib[that.urlLib.length-1].href--%>
      <%--    var aa = that.urlLib[that.urlLib.length].href--%>
      <%--  }--%>
      <%--})--%>
      var inputs = $('input')
      for( var a = 0; a < inputs.length; a++ ){
        $(inputs[a]).bind('change',function(){
          if( $(this).val() != '' ){
            $(this).removeClass('defualt')
          }
        })
      }
      var selects = $('select')
      for( var a = 0; a < selects.length; a++ ){
        $(selects[a]).bind('change',function(){
          if( $(this).val() != '请输入内容' ){
            $(this).removeClass('defualt')
          }
        })
      }
    },
    methods:{
      closeFrame : function() {
        window.parent.simpleCloseModal();
      },
      keep:function(){
        let that = this;
        //  检查项目
        var lagerProjectCode = $('#testproject option:selected').attr('title')
        var lagerProjectName = $('#testproject option:selected').val()
        //  小检查项目
        var smallProjectCode = $('#project option:selected').attr('title')
        var smallProjectName = $('#project option:selected').val()
        //  结果
        var testResult = $('#checkResult').val()
        //  检查时间
        var testTime = $('#beginDate').val()
        // 单位
        var unit = $('#unit').val()
        // 参考值
        var referenceValue = $('#referenceValue').val()
        if( lagerProjectCode && smallProjectCode && testResult != '' && testTime != '' ){
          $.ajax({
            url:"${URL_TESTPROJECT_ADDTEST}",
            data:{
              idCard : that.idcard,
              lagerProjectCode:lagerProjectCode,
              lagerProjectName:lagerProjectName,
              smallProjectCode:smallProjectCode,
              smallProjectName:smallProjectName,
              testResult:testResult,
              testTime:testTime,
              referenceValue:referenceValue,
              unit:unit
            },
            dataType:"json",
            type:"post",
            success:function(data){
              if( data.success ){
                // $("#testIframe").attr('src',srcId);
                // 刷新当前页面
                parent.showSrc('${ctx}/boneLoose/qianhu/detail?idCard=' + that.idcard + '&diseasesType=5&fresh=1');
                that.closeFrame();
              }
            }
          })
        }else{
          var inputs = $('input')
          var arr = []
          var arr1 = []
          for( var a = 0; a < inputs.length; a++ ){
            if( $(inputs[a]).val() === '' ){
              $(inputs[a]).addClass('defualt')
              arr.push($(inputs[a]))
            }
          }
          if( !lagerProjectCode ){
            $('#testproject').addClass('defualt')
            arr1.push($('#testproject'))
          }
          if( !smallProjectCode ){
            $('#project').addClass('defualt')
            arr1.push($('#project'))
          }
          if( arr1[0] ){
            arr1[0].focus()
            $(arr1[0]).removeClass('defualt')
          }else{
            arr[0].focus()
            $(arr[0]).removeClass('defualt')
          }
        }
      }
    }
  })
  $(document).ready(function() {
    initLayDate('#beginDate');
  });


</script>
</body>
</html>

